<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动手实验</title>
    <link rel="stylesheet" href="../../css/L4/labor.css" />
    <script src="../../plugins/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="../../plugins/zrender.min.js"></script>
    <script src="../../plugins/pixi.js"></script>
    <script src="../../plugins/bump.js"></script>
    <script src="../../plugins/tink.js"></script>
</head>

<body>
    <div class="main" id="main">
        <!-- 这里是返回条的div -->
        <div id="backbar">
            <div id="backbutton">&lt</div>
            <!-- <div id="backtitle">动手实验</div> -->
            <div id="playicon"></div>
        </div>
        <!-- 在这里设置一个实验完成的遮罩 -->
        <div class="shadowPanel">
            <div class="controlbox">
                <div class="replay">
                    <img src="../../images/再玩一遍.png" alt="再看一遍" />
                    <p>再玩一遍</p>
                </div>
                <div class="nextItem">
                    <img src="../../images/下一环节.png" alt="下一环节" />
                    <p>下一环节</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="module">
    import { modifyCourseStatus } from '../../js/modify_course_status.js'

    window.onload = function () {
        let DESIGN_WIDTH = 1334
        let DESIGN_HEIGHT = 750
        // 初始化及基准rem的值
        document.documentElement.style.fontSize =
            (window.innerHeight * 12) / DESIGN_WIDTH + 'px'

        // 当前实验是否播放声音
        // let audioplay = true
        let audio
        let playing = {
            'background-image': 'url(../../images/播放着.png)',
            'background-size': '80%',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
        }

        let toPlay = {
            'background-image': 'url(../../images/点击播放.png)',
            'background-size': '80%',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
        }

        let currentAudioUrl = ''
        // pixijs
        let app, loader
        let flower, flower2
        let flower_1, flower_2, flower_3, flower_4, flower_5, flower_6, flower_7, flower_8
        let message
        let line0, line1, line2, line3
        let tool_message
        let Image
        let image
        let ans_right, ans_error
        // 图片点击的次数
        let countClick = 0
        let flowertuple = []
        let imageIndex = []
        let lineCount = 0
        // bump.js
        let b = new Bump(PIXI)
        let imageArray = []
        let create_image_count = 0
        //创建图片计数
        // window
        let windowWidth = window.innerWidth
        let windowHeight = window.innerHeight
        // tink.js
        let tink
        let state = play

        // if (windowHeight / windowWidth < DESIGN_WIDTH / DESIGN_HEIGHT) {
        //   $("html").css({
        //     height: (windowWidth * DESIGN_WIDTH) / DESIGN_HEIGHT,
        //   });
        // }

        function initApp() {
            app = new PIXI.Application({
                resolution: 3,
                width: windowWidth,
                height: windowHeight,
                autoDensity: true,
            })
            app.stage.sortableChildren = true
            app.renderer.backgroundColor = 0xfef6ef
            document.getElementById('main').appendChild(app.view)
            loader = new PIXI.Loader()
            loader.add([
                '../../images/rowimages_01/位置框.png',
                '../../images/rowimages_04/播放着.png',
                '../../images/rowimages_04/1.jpg',
                '../../images/rowimages_04/2.jpg',
                '../../images/rowimages_04/3.jpg',
                '../../images/rowimages_04/4.jpg',
                '../../images/rowimages_04/5.jpg',
                '../../images/rowimages_04/6.jpg',
                '../../images/rowimages_04/7.jpg',
                '../../images/rowimages_04/8.jpg',
                '../../images/rowimages_01/正确、.png',
                '../../images/rowimages_01/错误.png'
                // "../../images/16pic_6962525_cc1c79f6.svg",
            ])
            tink = new Tink(PIXI, app.view)
            setBackground()
            createToolMessage()

        }
        // 创建背景精灵
        function setBackground() {
            let bg = loader.load(setupBg)
            function setupBg() {
                let bgimage = new PIXI.Sprite(
                    loader.resources['../../images/rowimages_01/位置框.png'].texture
                )
                bgimage.width = (windowWidth * 160) / DESIGN_HEIGHT
                bgimage.height = windowHeight
                bgimage.x = (windowWidth * 460) / DESIGN_HEIGHT
                bgimage.zIndex = 0
                app.stage.addChild(bgimage)
            }
        }



        //创建图片精灵
        function createflowerScript(x, y) {
            flower = new PIXI.Sprite(
                loader.resources['../../images/rowimages_04/' + (create_image_count + 1) + '.jpg'].texture
            );
            flower.buttonMode = true;
            flower.interactive = true;
            flower.ishave = false;
            flower.isClicked = false
            flower.on("pointerdown", flowerDown)
            flower.width = (windowHeight * 160) / DESIGN_WIDTH;
            flower.height = (windowWidth * 160) / DESIGN_HEIGHT;
            flower.x = (windowWidth * x) / DESIGN_HEIGHT
            flower.y = (windowHeight * y) / DESIGN_WIDTH
            flower.zIndex = 1
            create_image_count++;
            return flower;
        }

        function createflowerSprite1(x, y) {
            flower_1 = loader.load(flower1Setup);
            function flower1Setup() {
                flower_1 = createflowerScript(x, y);
                flower_1.name = 'flower_1';
                flower_1.isClicked = false

                app.stage.addChild(flower_1);
            }
        }
        function createflowerSprite2(x, y) {
            flower_2 = loader.load(flower2Setup);
            function flower2Setup() {
                flower_2 = createflowerScript(x, y);
                flower_2.name = 'flower_2';
                app.stage.addChild(flower_2);
            }
        }
        function createflowerSprite3(x, y) {
            flower_3 = loader.load(flower3Setup);
            function flower3Setup() {
                flower_3 = createflowerScript(x, y);
                flower_3.name = 'flower_3';
                app.stage.addChild(flower_3);
            }
        }
        function createflowerSprite4(x, y) {
            flower_4 = loader.load(flower4Setup);
            function flower4Setup() {
                flower_4 = createflowerScript(x, y);
                flower_4.name = 'flower_4';
                app.stage.addChild(flower_4);
            }
        }
        function createflowerSprite5(x, y) {
            flower_5 = loader.load(flower5Setup);
            function flower5Setup() {
                flower_5 = createflowerScript(x, y);
                flower_5.name = 'flower_5';
                app.stage.addChild(flower_5);
            }
        }
        function createflowerSprite6(x, y) {
            flower_6 = loader.load(flower6Setup);
            function flower6Setup() {
                flower_6 = createflowerScript(x, y);
                flower_6.name = 'flower_6';
                app.stage.addChild(flower_6);
            }
        }
        function createflowerSprite7(x, y) {
            flower_7 = loader.load(flower7Setup);
            function flower7Setup() {
                flower_7 = createflowerScript(x, y);
                flower_7.name = 'flower_7';
                app.stage.addChild(flower_7);
            }
        }
        function createflowerSprite8(x, y) {
            flower_8 = loader.load(flower8Setup);
            function flower8Setup() {
                flower_8 = createflowerScript(x, y);
                flower_8.name = 'flower_8';
                app.stage.addChild(flower_8);
            }
        }


        function flowerDown() {
            addImageBorder(this)
            if (countClick == 0) {
                countClick++
                flowertuple[0] = this.x + this.width / 2
                flowertuple[1] = this.y + this.height / 2
                imageIndex[0] = parseInt(this.name.split("_")[1])
            } else if (countClick == 1) {
                countClick++
                flowertuple[2] = this.x + this.width / 2
                flowertuple[3] = this.y + this.height / 2
                imageIndex[1] = parseInt(this.name.split("_")[1])
                // 判断图片是不是一对儿
                if (matchImage(imageIndex[0], imageIndex[1])) {
                    // 是一对
                    createline(flowertuple[0], flowertuple[1], flowertuple[2], flowertuple[3])
                    app.stage.getChildByName("flower_" + imageIndex[0]).interactive = false
                    app.stage.getChildByName("flower_" + imageIndex[1]).interactive = false
                } else {
                    // 不是一对儿
                    playAudio("../../audio/L4/L4失败音效.mp3")
                }

                setTimeout(() => {
                    // app.stage.getChildByName("flower_" + imageIndex[0] + "_rectangle").visible = false
                    // app.stage.getChildByName("flower_" + imageIndex[1] + "_rectangle").visible = false
                    app.stage.getChildByName("flower_" + imageIndex[0] + "_rectangle").destroy()
                    app.stage.getChildByName("flower_" + imageIndex[1] + "_rectangle").destroy()
                    flowertuple = []
                    imageIndex = []
                    countClick = 0
                }, 1000);

                setTimeout(() => {
                    if (lineCount == 4) {
                        // app.renderer.backgroundColor = 0xfef6ef
                        // 清空画布app.stage.children
                        flower_1.destroy()
                        flower_2.destroy()
                        flower_3.destroy()
                        flower_4.destroy()
                        flower_5.destroy()
                        flower_6.destroy()
                        flower_7.destroy()
                        flower_8.destroy()
                        line0.destroy()
                        line1.destroy()
                        line2.destroy()
                        line3.destroy()
                    }
                }, 1000);

            }
        }


        //显示图片
        function addImageBorder(image) {
            let flowerBorder = app.stage.getChildByName(image.name + "_rectangle")
            if (flowerBorder) {
                flowerBorder.visible = true
            } else {
                let rectangle = new PIXI.Graphics();
                rectangle.lineStyle(4, 0xFF3300, 1);
                rectangle.drawRect(image.x, image.y, image.width, image.height);
                rectangle.name = image.name + "_rectangle"
                app.stage.addChild(rectangle);
            }

        }


        //连线
        function createline(x1, y1, x2, y2) {
            if (lineCount == 0) {
                line0 = new PIXI.Graphics();
                line0.lineStyle(4, 0xffd900, 1);
                line0.moveTo(x1, y1);
                line0.lineTo(x2, y2);
                line0.visible = true
                line0.zIndex = 0
                line0.name = "line" + lineCount++
                app.stage.addChild(line0);
            } else if (lineCount == 1) {
                line1 = new PIXI.Graphics();
                line1.lineStyle(4, 0xffd900, 1);
                line1.moveTo(x1, y1);
                line1.lineTo(x2, y2);
                line1.visible = true
                line1.zIndex = 0
                line1.name = "line" + lineCount++
                app.stage.addChild(line1);

            } else if (lineCount == 2) {
                line2 = new PIXI.Graphics();
                line2.lineStyle(4, 0xffd900, 1);
                line2.moveTo(x1, y1);
                line2.lineTo(x2, y2);
                line2.visible = true
                line2.zIndex = 0
                line2.name = "line" + lineCount++
                app.stage.addChild(line2);

            } else if (lineCount == 3) {
                line3 = new PIXI.Graphics();
                line3.lineStyle(4, 0xffd900, 1);
                line3.moveTo(x1, y1);
                line3.lineTo(x2, y2);
                line3.visible = true
                line3.zIndex = 0
                line3.name = "line" + lineCount++
                app.stage.addChild(line3);
            } else {

            }

            flowertuple = []
        }

        // 图片匹配算法
        function matchImage(x, y) {
            let matched = false
            if (x == 1) {
                if (y == 6) {
                    // 如果是一对 就连线
                    matched = true
                    playAudio("../../audio/L4/L4正确音效.mp3")
                }
            }
            if (x == 2) {
                if (y == 5) {
                    matched = true
                }
            }
            if (x == 3) {
                if (y == 8) {
                    matched = true
                }
            }
            if (x == 4) {
                if (y == 7) {
                    matched = true
                }
            }
            if (x == 6) {
                if (y == 1) {
                    // 如果是一对 就连线
                    matched = true
                    playAudio("../../audio/L4/L4正确音效.mp3")
                }
            }
            if (x == 5) {
                if (y == 2) {
                    matched = true
                }
            }
            if (x == 8) {
                if (y == 3) {
                    matched = true
                }
            }
            if (x == 7) {
                if (y == 4) {
                    matched = true
                }
            }


            return matched
        }

        function createbackground() {
            //254, 246, 239

        }

        //文字函数
        function createToolMessage() {
            tool_message = new PIXI.Text('小朋友，请把动植物特征和其对应的发明创造用线连起来哦!', {
                fontSize: (windowWidth * 36) / DESIGN_HEIGHT,
            })
            tool_message.rotation = Math.PI / 2
            tool_message.y = (windowHeight - tool_message.width) / 2
            tool_message.x = (windowWidth * 557) / DESIGN_HEIGHT
            tool_message.zIndex = 1
            app.stage.addChild(tool_message)
        }


        // 创建结果精灵
        function createResultSprite() {
            loader.load(setupRes)
            function setupRes() {
                ans_right = new PIXI.Sprite(
                    loader.resources['../../images/rowimages_01/正确、.png'].texture
                )
                ans_error = new PIXI.Sprite(
                    loader.resources['../../images/rowimages_01/错误.png'].texture
                )
                ans_right.width = (windowWidth * 60) / DESIGN_HEIGHT
                ans_right.height = ans_right.width
                ans_error.width = (windowWidth * 60) / DESIGN_HEIGHT
                ans_error.height = ans_error.width
                ans_right.visible = false
                ans_error.visible = false
                app.stage.addChild(ans_right, ans_error)
            }
        }

        function gameLoop() {
            requestAnimationFrame(gameLoop)
            state()
            tink.update()
            // app.renderer.render(app.stage)
        }

        async function playAudio(url) {
            if (audio) {
                audio.pause()
            }
            // let audio;
            audio = new Audio(url)
            playicon.css(playing)
            audio.play()
            currentAudioUrl = url
            return audio
        }

        // 选择结果之后的透明度处理
        function alphaAdd(sprite, spriteArray) {
            spriteArray.forEach(function (value, index, array) {
                value.alpha = 1
                if (sprite.id !== value.id) {
                    value.alpha = 0.5
                }
            })
        }

        function clearAlpha(spriteArray) {
            spriteArray.forEach(function (value, index, array) {
                value.alpha = 1
            })
        }

        function play() { }

        //对页面的顶端返回条进行设置
        let backbar = $('#backbar')
        backbar.css({
            width: windowHeight,
            height: (windowWidth * 114) / DESIGN_HEIGHT,
            'line-height': (windowWidth * 114) / DESIGN_HEIGHT + 'px',
            transform: 'rotate(90deg)',
            'transform-origin': '0% 0%',
            top: 0,
            left: windowWidth,
        })

        let backbutton = $('#backbutton')
        backbutton.css('line-height', (windowWidth * 114) / DESIGN_HEIGHT + 'px')
        backbutton.css('width', backbutton.height())
        backbutton.css('text-align', 'center')
        backbutton.on('click', function (e) {
            e.stopPropagation()
            location.href = '../../index.html'
        })

        let backtitle = $('#backtitle')
        backtitle.css('line-height', (windowWidth * 80) / DESIGN_HEIGHT + 'px')

        let playicon = $('#playicon')
        playicon.css('width', (windowWidth * 80) / DESIGN_HEIGHT + 'px')
        playicon.on('click', function (e) {
            e.stopPropagation()
            playAudio(currentAudioUrl).then((resolve) => {
                resolve.addEventListener('ended', function () {
                    playicon.css(toPlay)
                })
            })
        })

        // 对实验的遮罩层进行设置
        let shadowPanel = $('.shadowPanel')
        shadowPanel.hide()
        shadowPanel.css({
            width: windowHeight,
            height: windowWidth,
            'transform-origin': '0% 0%',
            left: windowWidth,
        })

        // 获取再看一遍的按钮
        let replay = $('.replay')
        replay.bind('click', function (e) {
            location.href = ''
            shadowPanel.hide()

        })

        let nextItem = $('.nextItem')
        nextItem.bind('click', function (e) {
            window.location.replace('./course_report_01.html')
            shadowPanel.hide()
        })

        initApp();

        createflowerSprite1(300, 300)
        createflowerSprite2(300, 550)
        createflowerSprite3(300, 800)
        createflowerSprite4(300, 1050)
        createflowerSprite5(100, 300)
        createflowerSprite6(100, 550)
        createflowerSprite7(100, 800)
        createflowerSprite8(100, 1050)

        gameLoop();

    }
</script>

</html>